<template>
  <div class="home_box">
    <image-upload
      :max-count="4"
      :img-list="imgList"
      @on-upload="onUpload"
      @on-delete="onDelete"
    >
    </image-upload>
  </div>
</template>

<!-- 首页 -->
<script setup lang="ts">
import imageUpload from '@/components/business/upload/image-upload.vue'
import { computed, ref } from 'vue'

const imgs = ref<string[]>([
  'http://dummyimage.com/100x100',
  'http://dummyimage.com/100x100',
  'http://localhost:9090/upload/image69cd582d-2876-43b3-a260-c8e01605e5eb.jpg',
  'http://localhost:9090/upload/image0128a3a2-16e6-4afb-ab48-a1c1c56a1c05.jpg',
])

/**
 * 图片列表
 */
const imgList = computed(() => {
  if (imgs.value) {
    return [...imgs.value]
  }
  return []
})

/**
 * 图片上传
 */
const onUpload = (data: string | string[]) => {
  imgs.value = [...(data as unknown as string[])]
}

const onDelete = (data: string | string[]) => {
  imgs.value = [...(data as unknown as string[])]
}
</script>

<style scoped lang="scss">
.home_box {
}
</style>
